import { defineComponent, reactive } from 'vue'
import MessageBox from '@/components/nComponents/MessageBox'
import { NButton, NSpin } from 'naive-ui'
import pageStyle from './styles/del.module.scss'

export default defineComponent({
  props: {
    tips: {
      type: String,
      default: () => '温馨提示'
    },
    title: {
      type: String,
      default: () => ''
    },
    isConfirm: {
      type: Boolean,
      default: true
    },
    isCancel: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: () => ''
    },
    isIcon: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: () => ''
    }
  },
  emits: ['confirm'],
  setup(props, { expose, emit }) {
    const state = reactive({
      delShow: false,
      delLoading: false
    })
    const handConfirm = () => {
      state.delLoading = true
      emit('confirm')
    }
    const close = () => {
      closeLoading()
      state.delShow = false
    }
    const closeLoading = () => {
      state.delLoading = false
    }
    const open = () => {
      state.delShow = true
    }
    expose({
      open,
      close,
      closeLoading
    })
    const boxSlot = {
      header: () => (
        <div>
          <div class='title'>{props.tips}</div>
        </div>
      ),
      default: () => (
        <>
          <div class={pageStyle.delBox}>
            <div class='con'>
              {props.isIcon && <i class='esayIcon esayIcon-jinggao'></i>}
              <span class='tip'>{props.title}</span>
            </div>
            <div class='btns'>
              {props.isCancel && (
                <NButton
                  secondary
                  onClick={() => {
                    state.delShow = false
                  }}
                >
                  {props.cancelText}
                </NButton>
              )}
              {props.isConfirm && (
                <NButton
                  style={{ marginLeft: '10px' }}
                  type='primary'
                  onClick={handConfirm}
                >
                  {state.delLoading && (
                    <NSpin
                      style='margin-right: 5px'
                      size={15}
                      stroke='#fff'
                      v-slots={{
                        icon: () => (
                          <i
                            class='esayIcon esayIcon-a-jiazaizhongdaxiao'
                            style='color: #fff;'
                          />
                        )
                      }}
                    />
                  )}
                  <span>{props.confirmText}</span>
                </NButton>
              )}
            </div>
          </div>
        </>
      )
    }
    return () => (
      <MessageBox
        width={'400px'}
        v-model={state.delShow}
        isClose={false}
        v-slots={boxSlot}
      />
    )
  }
})
